$(function(){
    class Magnifier{
        constructor(options){
        

            this.img = document.querySelector(options.img);
            this.focus = document.querySelector(options.focus);
            this.big_img = document.querySelector(options.big);

            //给大图增加position:absolute
            this.big_bg = document.querySelector(options.big_img);

            //big-img大小比例
            this.scale = 0.6;

            this.init();
            //为了获取元素的偏移距离，计算focus位置
            this.container = document.querySelector(options.el);
            //container位置
            
            this.c_off = {
                left : this.container.offsetLeft,
                top  : this.container.offsetTop,
        }
    
            // offset 家族是没办法测量 display 为none 的元素; 
            //获取focus位置
            this.f_style = getComputedStyle(this.focus);
            //img框位置
            this.i_style = getComputedStyle(this.img);

            //边界检测
            this.boundary = {
                x : {
                    min : 0,
                    max : parseInt(this.i_style.width) - parseInt(this.f_style.width)
                },
                y : {
                    min : 0,
                    max : parseInt(this.i_style.height) - parseInt(this.f_style.height)
                }
            }

            this.bindEvent();
        }

        init(){
            this.focus.style.width = 350 * this.scale + "px";
            this.focus.style.height = 350 * this.scale + "px";

            this.big_img.style.width = 800 * this.scale + "px";
            this.big_img.style.height = 800 * this.scale + "px";
        }

        bindEvent(){
            
            //鼠标移入事件
            this.img.addEventListener("mouseover" , () => {
                //显示
                this.show();
            })

            //鼠标移出事件
            this.img.addEventListener("mouseout" , () => {
                //隐藏
                this.hidden();
            })

            // 鼠标移动focus
            this.img.addEventListener("mousemove" , ( e ) => {
                //focus移动
                this.move(e.pageX , e.pageY);
            })
        }
        show(){
            this.focus.style.display = "block";
            this.big_img.style.display = "block";
        }

        hidden(){
            this.focus.style.display = "none";
            this.big_img.style.display = "none";
        }

        move(x,y){
            //测量x,y的值
            //c-container , f- focus
            //鼠标的定位是根据浏览器可视见面
            //focus的定位是根据container 所以会出现一个差值
            x = x - this.c_off.left - parseInt(this.f_style.width) / 2;
            y = y - this.c_off.top - parseInt(this.f_style.height) / 2;
            
            //判断边界
            x = x <= this.boundary.x.min ? this.boundary.x.min : x;
            x = x >= this.boundary.x.max ? this.boundary.x.max : x;

            y = y <= this.boundary.y.min ? this.boundary.y.min : y;
            y = y >= this.boundary.y.max ? this.boundary.y.max : y;

            //focus赋值
            this.focus.style.left = x + "px";
            this.focus.style.top = y + "px"

            //跟随focus移动
            this.big_bg.style.left = -x * ( 800 / 350 )  + "px"
            this.big_bg.style.top = -y * ( 800 / 350 ) + "px"
        }
    //     change( index ){
    //         this.btns.forEach( ele => ele.classList.remove("active") );

    //         this.btns[index].classList.add("active");

    //         this.img.children[0].src = this.img_list[index].small;
    //         this.big_bg.src = this.img_list[index].big;
    //   }


    } 
})